<template>
  <view class="container">
    <u-navbar title="登录" @leftClick="leftClick" bgColor="transparent"
              :titleStyle="{fontSize:'36rpx',fontWeight:'500'}"></u-navbar>
    <u-toast ref="uToast"></u-toast>
    <!--    v-if="step===1&&!user"-->
    <view class="content">
      <image class="logo" src="../static/logo.png"></image>
      <view class="text-area">
        <text class="title">欢迎登录盘达派</text>
      </view>
      <view class="loginBtn">
        <u-button type="primary" text="微信登录" @tap="getUserProfile"></u-button>
      </view>
      <view class="agreementDiv">
        <u-checkbox-group placement="row" v-model="agreement">
          <u-checkbox shape="circle" labelSize="24rpx" labelColor="#999" :name="1"
                      label="我已阅读并接受"></u-checkbox>
        </u-checkbox-group>
        <view class="link" @tap="goUserAgreement">《用户协议》</view>和<view class="link" @tap="goPrivacyPolicy">《隐私政策》
      </view>
      </view>
    </view>
    <!--		<view class="content beginDiv" v-if="false">-->
    <!--      <view>-->
    <!--        <image class="logo" src="/static/begin_recycle.png"></image>-->
    <!--        <view class="loginBtn">-->
    <!--          <u-button type="primary" text="发起回收" @tap="goRecycle"></u-button>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--		</view>-->
    <!-- <view class="registerDiv" v-if="step===2">
      <image class="logo" src="/static/reg.png"></image>
      <view class="reg_title">
        <text>注册企业账号</text>
      </view>
      <view class="reg_desc">
        <text>您还未注册，请立即注册</text>
      </view>
      <view class="regBtn" @tap="goRegisterCompany">
        <text>去注册</text>
        <image class="ico" src="/static/right_arr.png"></image>
      </view>
    </view> -->
    <u-popup :overlay="true" :show="Status" mode="bottom"  @close="close" @open="open">
      <view style="padding: 20px;background-color: white!important;">
        <view style="font-size: 20px">申请 获取你的昵称、头像</view>
        <view style="display: flex;padding: 20px 0">
          <view style="width: 70px">
            <image :src="userInfo.userInfo.avatarUrl"
                   style="width: 50px;height: 50px;border-radius: 5px;text-align: center"></image>
          </view>
          <view style="flex: 1">
            <view style="padding-bottom: 6px">{{ userInfo.userInfo.nickName }}</view>
            <view style="color: #bfbbbb">微信个人信息</view>
          </view>
        </view>
        <view style="padding-bottom: 20px;width: 150px">
          <u-button text="授权并获取手机号"
                    style="width: 150px"
                    open-type="getPhoneNumber"
                    @getphonenumber="onGetPhoneNumber">
          </u-button>
        </view>
        <view class="ddisp">
          <view style="width: 50%">
            <view style="width: 120px;margin: 0 auto">
              <u-button text="拒绝" style="color: #5ac725" @click="close"></u-button>
            </view>
          </view>
          <view style="width: 50%">
            <view style="width: 120px;margin: 0 auto">
              <u-button type="success" text="允许" @click="openLogin"></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import customTabbar from '@/components/custom_tabbar.vue'
import store from 'store/index.js';//需要引入store
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex';
export default {
  computed: {
    ...mapState(['count', 'user', 'wxUserInfo']),
    ...mapState({
      user: state => state.user,
      wxUserInfo: state => state.wxUserInfo
    })
  },
  components: {
    customTabbar
  },
  data() {
    return {
      step: 1,
      agreement: [],
      Status:false,
      userInfo:{},
      user_detail: {}
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        this.step = 2;
        console.log("watchuser", newVal, oldVal)
      },
      deep: true
    }
  },
  onLoad() {
    let that = this;
    if(that.user){
      that.step = 2;
    }
    // wx.getSetting({
    // 	success(res) {
    // 		if (res.authSetting['scope.userInfo']) {
    // 			console.log('用户已授权获取用户信息');
    // 			// 用户已经授权，可以直接调用 wx.getUserProfile 获取用户信息
    // 			console.log(this.user)
    // 			that.step = 1;
    // 		} else {
    // 			console.log('用户未授权获取用户信息');
    // 			that.step = 1;
    // 			// 提示用户去设置页面开启授权
    // 		}
    // 	},
    // 	fail(err) {
    // 		console.error('获取设置失败', err);
    // 	}
    // });
  },
  onShow() {
    // if (this.user) {
    // 	this.step = 2;
    // }
  },
  methods: {
    leftClick(){
      uni.navigateBack();
    },
    // 获取手机号
    onGetPhoneNumber(e){
      console.log(e.detail)
      this.user_detail = e.detail

    },
    close(){
      this.Status = false
    },
    open(){
      this.Status = true
    },
    // 允许登录
    openLogin(){
      this.Status = false
      this.$store.commit('setWxUserInfo', this.userInfo);
      // data.mobile = res.data[0].mobile;
      // // 提交 mutation 来更新 Vuex 状态
      // this.setUser(data);
      this.login({
        userInfo:this.userInfo,
        phoneCode:this.user_detail
      });
    },
    showToast(msg, type = "default") {
      this.$refs.uToast.show({
        type: type,
        message: msg,
      });
    },
    getUserProfile() {
      if (this.agreement.length > 0) {
        uni.getUserProfile({
          desc: '用于完善会员资料', // 必填，必须告知用户需要获取的信息用途
          success: (res) => {
            this.userInfo = res
            this.Status = true
            console.log('用户信息',res);
          },
          fail: (res) => {
            console.log("用户拒绝了请求", res);
            // 用户拒绝提供信息时的处理逻辑
          }
        });
      } else {
        this.showToast("请确认用户协议和隐私政策。")
      }
    },
    // goRegisterCompany() {
    // 	uni.navigateTo({
    // 		url: "/pages/mine/registerCompany"
    // 	})
    // },
    goRecycle() {
      uni.switchTab({
        url: "/pages/recycle/recycle"
      })
    },
    goUserAgreement() {
      uni.navigateTo({
        url: "/pages/index/agreement"
      })
    },
    goPrivacyPolicy() {
      uni.navigateTo({
        url: "/pages/index/privacyPolicy"
      })
    },
    ...mapActions(['login'])
  }
}
</script>

<style lang="scss">
.ddisp >view{
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}
.agreementDiv {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #999;

  .link {
    font-size: 28rpx;
    color: #0080FF;
  }
}

.loginBtn {
  margin-top: 168rpx;
  width: 590rpx;
  height: 96rpx;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  flex-grow: 0;
  flex-shrink: 0;
  height: 176rpx;
  width: 176rpx;
  margin-top: 188rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #333;
}

.beginDiv {
  .logo {
    width: 400rpx;
    height: 400rpx;
  }

  .loginBtn {
    margin-top: 0;
  }
}

.registerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 258rpx auto 0;
  width: 622rpx;
  height: 460rpx;
  position: relative;

  background: linear-gradient(180deg, rgba(206, 239, 254, 0.5) 0%, #FFFFFF 50%);
  box-shadow: 0px 0px 8px 4px rgba(229, 229, 229, 0.3);
  border-radius: 16px;

  .logo {
    margin-top: -100rpx;
  }

  .reg_title {
    color: #333;
    font-size: 36rpx;
    margin-bottom: 20rpx;
  }

  .reg_desc {
    color: #969799;
    font-size: 28rpx;
    margin-bottom: 80rpx;
  }

  .regBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 32rpx;
    width: 486rpx;
    height: 96rpx;
    background: #0080FF;
    border-radius: 8rpx;

    .ico {
      width: 40rpx;
      height: 40rpx;
      margin-left: 28rpx;
    }
  }
}
</style>
